<template>
	<view class="login-container">
		<image class="logo" src="/static/logo.png"></image>
		<input v-model="username" class="input" type="text" placeholder="请输入用户名" />
		<input v-model="password" @confirm="login" confirm-type="done" class="input" type="password"
			placeholder="请输入密码">
		<button @click="login" size="mini" class="login-button">
			<span class="lg">登录</span>
		</button>
	</view>
</template>

<script setup>
	import * as userApi from "@/api/users.js"

	import { ref } from "vue"

	import useUsers from "@/store/users.js"

	import { onShow, onHide ,onUnload} from "@dcloudio/uni-app"

	onHide(() => {
		//标识登入窗口已经关闭
		userStore.authView = false
	})
	
	onUnload(()=>{
		userStore.authView = false
	})

	let userStore = useUsers()

	let username = ref("")

	let password = ref("")

	let login = async () => {
		uni.showToast({
			icon: 'loading',
			duration: 1000 * 5,
			title: '正在登入'
		})
		try {

			if (!username.value || !password.value) {
				uni.showToast({
					icon: "error",
					title: '没有输入用户名或密码'
				})
				return
			}
			let result = await userApi.otherLoginApi({ username: username.value, password: password.value });
			userStore.userInfo = result.userInfo;
			//存储token
			uni.setStorageSync('myx-token', result.token)
			// console.log(result)

			//隐藏弹框
			uni.hideToast()
			//跳转页面到首页
			uni.switchTab({
				url: "/pages/tabbar/home/home"
			})
		} catch (e) {
			//弹窗
			uni.showToast({
				icon: "none",
				title: e.toString()
			})
		}
	}
</script>

<style>
	/* 样式可以根据自己的需求进行定制 */
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 5vh;
		height: 100vh;
	}

	.logo {
		width: 100px;
		height: 100px;
		margin-bottom: 20px;
	}

	.input {
		width: 80%;
		margin: 10px 0;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 15px;
	}

	.login-button {
		height: 50px;
		/* display: flex;
		direction: column;
		align-items: center;
		justify-content: center; */
		font-size: 20px;
		width: 85%;
		background-color: #73C038;
		color: #fff;
		border: none;
		border-radius: 15px;
		cursor: pointer;
	}

	.login-button .lg {
		display: inline-block;
		line-height: 50px;
	}
</style>